<template>
    <view class="container">
        <!-- @scrolltolower="scrolltolower" -->
        <view class="tab-box">
            <component-tab :list="tabList" :active="tabIndex" @change="onTab" class="tba-i" />
        </view>
        <!-- 报案处理列表 -->
        <view v-if="tabIndex == 0">
            <report :tabIndex="tabIndex" />
        </view>
        <!-- 子弹发薪列表 -->
        <view v-if="tabIndex == 1" onBottom>
            <payHtml :tabIndex="tabIndex" />
        </view>
        <!-- 日日保列表 -->
        <view v-if="tabIndex == 2">
            <insurance-html :tabIndex="tabIndex" />
        </view>
        <!-- 长期保 -->
        <view v-if="tabIndex == 3">
            <long-insurance-html :tabIndex="tabIndex" />
        </view>
        <!-- 团意保 -->
        <view v-if="tabIndex == 4">
            <gcpa-insurance-html :tabIndex="tabIndex" />
        </view>
        <customTabBar url="/pages/index/index"/>
    </view>
</template>
<script setup lang="ts">
// onReachBottom
import { ref } from 'vue'
import componentTab from '@/components/tab/tab.vue'
import tabRadius from '@/components/tab-radius/tab-radius.vue'
import payHtml from './components/pay.vue'
import insuranceHtml from './components/insurance.vue'
import longInsuranceHtml from './components/long-insurance.vue'
import gcpaInsuranceHtml from './components/gcpa-insurance.vue'
import report from './components/report.vue'
import { share } from '@/utils/share'
import { onShow, onLoad } from '@dcloudio/uni-app'
import customTabBar from '@/components/tabbar/index.vue';


onShow((options) => {
    wx.showShareMenu({
        withShareTicket: true,
        /* //设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击 */
        menus: ["onShareAppMessage", "onShareTimeline"]
    })
})

const tabList = ref([
    {
        title: '报案处理',
        num: ''
    },
    {
        title: '子弹发薪',
        num: ''
    },
    {
        title: '日日保',
        num: ''
    },
    {
        title: '长期保',
        num: ''
    },
    {
        title: '团意保',
        num: ''
    }
])
const tabIndex = ref(0)
const flag = ref(0)
// 头部tab回调
const onTab = (index: number) => {
    console.log(index)
    tabIndex.value = index
}
const onBottom = () => {
    console.log('111')
}

</script>
<style lang="scss" scoped>
.container {
    height: calc(100vh - constant(safe-area-inset-bottom) - 100rpx);
    height: calc(100vh - env(safe-area-inset-bottom) - 100rpx);
    overflow: auto;
    background: #fafafc;
    padding-bottom: 0;
}

.tab-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-radius {
    padding: 0rpx 30rpx;
}

.scroll {
    height: 100vh;
}

.record {
    padding: 0 30rpx;
    @include flex-between;
    color: $grey;
    font-size: $font-normal;
    margin-top: 30rpx;

    .record-box {
        @include flex-between;
        color: #565868;
        font-size: $font-normal;
        margin-left: 34rpx;
    }

    .sort-img {
        width: 28rpx;
        height: 28rpx;
        margin-left: 8rpx;
    }
}

.record-list {
    padding: 0 30rpx;
    margin-top: 34rpx;

    .record-i {
        padding: 30rpx;
        background: #ffffff;
        border-radius: 16rpx;
        margin-bottom: 30rpx;
    }

    .i-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        border-bottom: 1rpx solid #f4f4f7;
        padding-bottom: 30rpx;
    }

    .top-title {
        width: 750rpx;
        font-size: $font-medium;
        font-weight: bold;
        color: $black;
    }

    .top-type {
        padding: 6rpx 15rpx;
        font-size: 24rpx;
        background-color: #00D679;
        border-radius: 30rpx;
        flex: none;
        color: #ffffff;
        margin-right: 16rpx;
    }

    .top-account {
        position: relative;
        width: 200rpx;
        color: #ff7642;
    }

    .account-num {
        font-size: $font-large;
        font-weight: bold;
        display: flex;
        align-items: baseline;
        text-align: right;
        justify-content: flex-end;
    }

    .account-unit {
        font-size: $font-small;
    }

    .account-unit-top {
        margin-top: 20rpx;
        font-size: $font-base;
    }

    .account-balance {
        text-align: right;
        color: $font-small;
    }

    .account-info {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
    }

    .account-info-active {
        color: #9497b1 !important;
    }

    .top-account-img {
        position: absolute;
        width: 72rpx;
        height: 72rpx;
        top: 0;
        right: 0;
        z-index: 0;
    }

    .i-info {
        margin-top: 30rpx;
    }

    .info-row {
        display: flex;
    }

    .info-row-left {
        width: 170rpx;
        color: $grey;
        font-size: $font-normal;
        margin-bottom: 17rpx;
    }

    .info-row-right {
        color: $black;
        font-size: $font-normal;
        margin-bottom: 17rpx;
    }
}

.head {
    width: 690rpx;
    margin: 0 auto;
}

.user-label {}

.user-avatar {
    @include avatar(70rpx);
    border: 1rpx solid #e2e6f1;
    margin-right: 15rpx;
}

.user {
    display: flex;
    color: $grey;
    align-items: flex-start;
    justify-content: space-between;
}

.head-user-left {
    display: flex;
    align-items: flex-start;
}

.head-user-right {
    margin-top: 10rpx;
    width: 190rpx;
    height: 60rpx;
    line-height: 60rpx;
    padding-left: 26rpx;
    background: rgba(255, 126, 104, 1);
    color: #ffffff;
    font-size: 24rpx;
    border-radius: 30rpx;

    .extension {
        width: 60rpx;
        height: 60rpx;
        float: right;
    }
}

.user-label {
    margin: 10rpx 0 0 16rpx;
    padding: 2rpx 15rpx;
    box-sizing: border-box;
    background: rgba(0, 214, 121, 0.1);
    color: #00d679;
    font-size: 24rpx;
    border-radius: 19rpx;
}

.user-name {
    font-size: $font-medium;
    font-weight: bold;
    color: $black;
    margin-bottom: 6rpx;
}

.basic {
    width: 690rpx;
    margin: 0 auto;
    margin-top: 20rpx;
    position: relative;
    height: 154rpx;
}

.basic-bg {
    position: absolute;
    width: 690rpx;
    height: 154rpx;
}

.basic-data {
    top: 40rpx;
    width: 100%;
    @include padding(0 58rpx);
    position: absolute;
    display: flex;
    justify-content: space-between;
    color: white;
}

.basic-msg {
    font-size: $font-small;
}

.basic-msg-number {
    margin-top: 16rpx;
    font-size: 30rpx;

    .number {
        font-size: $font-large;
        font-weight: bold;
    }
}

.helper {
    display: grid;
    grid-template-columns: 4fr 4fr 4fr;
    grid-template-rows: repeat(auto-fill);
    grid-gap: 24rpx;
    padding: 20rpx;
    align-items: center;

    .grid {
        background: #f9f9fa;
        padding: 32rpx;
        text-align: center;
        border-radius: 8rpx;
    }

    .grid-title .bold {
        font-size: $font-large;
        font-weight: bold;
    }

    .grid-descibe {
        color: $grey;
        font-size: $font-small;
    }

    .grid-descibe .bold {
        color: $green;
        font-weight: bold;
        margin: 0 4rpx;
    }
}

.helper-title {
    text-align: center;
}

.customer {
    background: #f9f9fa;
    border-radius: 8rpx;
    padding: 30rpx;
    margin-top: 24rpx;
}

.customer-i {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.customer-title {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 350rpx;
    font-size: $font-medium;
    font-weight: bold;
}

.customer-business {
    font-size: 24rpx;
    color: #00d679;
}

.customer-msg {
    margin-top: 24rpx;
    color: #202536;
}

.customer-msg-title {
    color: $grey;
}

.block-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24rpx;
}

.select-sort {
    color: #9497b1;
    font-size: 28rpx;
    display: flex;
    align-items: center;
}

.just-image {
    width: 25rpx;
    height: 25rpx;
    margin-left: 5rpx;
}

.just-image-active {
    transform: rotateX(-180deg);
}

.search-box {
    padding: 0;
}

.i-btn-box {
    margin-top: 15rpx;
    padding-top: 16rpx;
    border-top: 1rpx solid #F4F4F7;

    .inform-btn {
        border: 1rpx solid #DEE0E3;
        border-radius: 50rpx;
        padding: 10rpx 25rpx;
        font-size: $font-base;
        text-align: center;
        line-height: 58rpx;
        font-weight: normal;
    }
}
</style>
